import React, { Component } from 'react';
import { NavBar } from 'antd-mobile'
import SearchInput from '../index/searchinput/SearchInput'
import style from './Category.module.scss'
import axios from '../../utils/fecth'
import {withRouter} from 'react-router-dom'
class category extends Component {
    state = {
        categories: [],
        categories_content: [],
        select_index: 0,
    }
  
    //左边分类菜单点击触发
    handeIitemClick = (e) => {
        // 获取选中项
        let select_index = e.target.getAttribute("data-index");
        console.log(select_index);
        this.setState({
            select_index: parseInt(select_index),
            categories_content: this.state.categories[select_index].children,
        });
    }

// 右边图片点击的时候
handleProductItemClick = (e) => {
    let cid = e.target.getAttribute("data-index");
    // console.log(this.props);
    // console.log(cid);
    this.props.history.push("/goodList?cid="+cid);
  };
  // 获取分类菜单的数据
  getCategories = (params) => {
    axios
      .get("/categories")
      .then((res) => {
        console.log(res,1213213213)
        this.setCategories(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  // 设置分类菜单的数据
  // is_storaged 代表是否之前已经缓存过
  setCategories = (res, is_storaged) => {
    //缓存请求的数据
    let categories_cache = {};
    if (!is_storaged) {
        // 直接获取本地缓存中的数据即可

        categories_cache = { date: Date.now(), categories: res };
        // 缓存到本地中
        localStorage.setItem("categories_cache", JSON.stringify(categories_cache));
    }
    // if (is_storaged) {
    //   // 直接获取本地缓存中的数据即可
    //   categories_cache = JSON.parse(localStorage.getItem("categories_cache"));
    // } else {
    //   categories_cache = { date: Date.now(), categories: res };
    // }
    // // 缓存到本地中
    // localStorage.setItem("categories_cache", JSON.stringify(categories_cache));
    this.setState({
      categories: res,
      categories_content: res[0].children,
    });
  };

  componentDidMount() {
    let categories_cache = localStorage.getItem("categories_cache");
    // 如果本地缓存不为空
    if (categories_cache&&JSON.parse(categories_cache).date) {
      let current_time = Date.now
      let storage_time = JSON.parse(categories_cache).date;
      if (current_time - storage_time > 60 * 60 * 1000) {   // 一小时过期
        this.getCategories();
      } else {
        this.setCategories(JSON.parse(categories_cache).categories, true);
      }
    } else {
      this.getCategories();
    }
  }
    //左边内容
    contentLeftData() {
      
        return (
            this.state.categories.map((v, index) => {
                return <div
                    // className={style.contentLeftItem }
                    key={v.cat_id} data-index={index}
                    onClick={this.handeIitemClick}
                    // eslint-disable-next-line react/jsx-no-duplicate-props
                    className={
                        this.state.select_index === index
                          ? style.active+" "+style.contentLeftItem
                          : style.contentLeftItem
                      }
                   
                >
                    {v.cat_name}
                </div>
            })
        )
    }



    //右边内容
    contentRightData() {
        return (
            this.state.categories_content.map((v, i) => {
                return (
                    <div className={style.contentRightItem} key={v.cat_id}>
                        {/* 二级菜单标题开始 */}
                        <div className={style.rightItemTitle}>
                            {"/"}
                            {v.cat_name}
                            {"/"}
                        </div>
                        {/* 二级菜单标题结束 */}
                        {/* 产品列表开始 */}
                        <div
                            className={style.productList}
                            onClick={this.handleProductItemClick}
                        >
                            {v.children &&
                                v.children.map((v) => {
                                    return (
                                        <div
                                            key={v.cat_id}
                                            className={style.productListItem}
                                            data-index={v.cat_id}
                                        >
                                            <div className={style.imagerWrapper}>
                                                <img
                                                    src={v.cat_icon}
                                                    alt=""
                                                    data-index={v.cat_id}
                                                />
                                            </div>
                                            <div className={style.itemTitle}>{v.cat_name}</div>
                                        </div>
                                    );
                                })}
                        </div>
                        {/* 产品列表结束 */}
                    </div>
                );
            })
        )
    }
    render() {
        return (
            <div className={style.ygCategory}>
                <div className={style.ygIndexNav}>
                    <NavBar className={style.indexNav}
                        style={{ backgroundColor: 'var(--themeColor)' }}
                    >商品分类</NavBar>
                </div>

                {/* 首页search start*/}
                <div className={style.ygIndexSearch}>
                    <SearchInput></SearchInput>
                </div>
                {/* 首页search end */}

                {/* 分类菜单 start */}
                <div className={style.ygCategoryContent}>

                    {/* 左边导航menu start*/}
                    <div className={style.contentLeft}>
                        {this.contentLeftData()}
                    </div>
                    {/* 左边导航menu end*/}

                    {/* 右边menu start*/}
                    <div className={style.contentRight}>
                        {this.contentRightData()}
                    </div>
                    {/* 右边menu end*/}

                </div>
                {/* 分类菜单 end */}

            </div>

        );
    }
}

export default withRouter(category);
